<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <%@ include file="../../static/head.jsp" %>

    <!-- font-awesome -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/font-awesome.min.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .myContainer {
        margin-right: 10px;
    }

    .searchGroupBox {
        margin-left: 10px;
        margin-right: 10px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }

    .well {
        min-height: 20px;
        padding: 19px;
        /*margin-bottom: 20px;*/
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
    }

    .flex-space-between {
        display: flex;
        justify-content: space-between;
        /*  交叉轴居中  */
        align-items: center;
    }

    .marginTop {
        margin-top: 10px;
    }

    .dataTable {
        min-height: 400px;
    }

    .flex_center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*穿梭框外框高宽度*/
    .el-transfer-panel {
        width: 300px;
        height: 400px;
    }

    /*穿梭框内部展示列表的高宽度*/
    .el-transfer-panel__list {
        width: 300px;
        height: 361px;
    }

</style>
<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>
<!--/Pre Loader -->
<div class="wrapper">
    <!-- Page Content -->
    <div id="content">
        <!-- Top Navigation -->
        <%@ include file="../../static/topNav.jsp" %>
        <!-- Menu -->
        <div class="container menu-nav">
            <nav class="navbar navbar-expand-lg lochana-bg text-white">
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="ti-menu text-white"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- <div class="z-navbar-nav-title">$template2.back.menu.title.text</div> -->
                    <ul id="navUl" class="navbar-nav mr-auto">
                    </ul>
                </div>
            </nav>
        </div>
        <!-- /Menu -->
        <!-- Breadcrumb -->
        <!-- Page Title -->
        <div class="container mt-0">
            <div class="row breadcrumb-bar">
                <div class="col-md-6">
                    <h3 class="block-title">试卷表管理</h3>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="${pageContext.request.contextPath}/index.jsp">
                                <span class="ti-home"></span>
                            </a>
                        </li>
                        <li class="breadcrumb-item"><span>试卷表管理</span></li>
                        <li class="breadcrumb-item active"><span>修改试卷</span></li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- /Page Title -->

        <!-- /Breadcrumb -->
        <!-- Main Content -->
        <div class="container">
            <div class="myContainer" id="examinationPaperList">
                <!-- 试卷信息 start -->
                <div class="searchGroupBox well flex-space-between">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto">

                        <el-form-item label="试卷名称" prop="name">
                            <el-input v-model="ruleForm.name" style="width: 400px"></el-input>
                        </el-form-item>

                        <el-form-item label="考试时长" prop="examDuration">
                            <el-input v-model="ruleForm.examDuration" @input="handlerInputExamDuration"></el-input>
                        </el-form-item>
                        <el-form-item label="试卷状态" prop="status">
                            <el-switch
                                    v-model="ruleForm.status"
                                    active-text="启用"
                                    active-color="#13ce66"
                                    inactive-text="不启用"
                                    active-value="1"
                                    inactive-value="0">
                            </el-switch>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 试卷信息 end -->

                <!-- 表格 start -->
                <div class="searchGroupBox well marginTop dataTable">
                    <el-tabs v-model="activeName" @tab-click="handleTabClick">
                        <!-- 单选题 start -->
                        <el-tab-pane label="单选题" name="singleChoice">
                            <el-transfer v-model="singleChoiceSelected" :data="singleChoiceData"
                                         :titles="['题目列表', '已选题目']"
                                         :button-texts="[ '排除题目','选择题目']">
                            </el-transfer>
                        </el-tab-pane>
                        <!-- 单选题 end -->

                        <!-- 多选题 start -->
                        <el-tab-pane label="多选题" name="multipleChoice">
                            <el-transfer v-model="multipleChoiceSelected" :data="multipleChoiceData"
                                         :titles="['题目列表', '已选题目']"
                                         :button-texts="[ '排除题目','选择题目']">
                            </el-transfer>
                        </el-tab-pane>
                        <!-- 多选题 end -->

                        <!-- 判断题 start -->
                        <el-tab-pane label="判断题" name="trueOrFalse">
                            <el-transfer v-model="trueOrFalseSelected" :data="trueOrFalseData"
                                         :titles="['题目列表', '已选题目']"
                                         :button-texts="[ '排除题目','选择题目']">
                            </el-transfer>
                        </el-tab-pane>
                        <!-- 判断题 end -->

                        <!-- 填空题 start -->
                        <el-tab-pane label="填空题" name="fillInTheBlank">
                            <el-transfer v-model="fillInTheBlankSelected" :data="fillInTheBlankData"
                                         :titles="['题目列表', '已选题目']"
                                         :button-texts="[ '排除题目','选择题目']">
                            </el-transfer>
                        </el-tab-pane>
                        <!-- 填空题 end -->

                    </el-tabs>
                </div>
                <!-- 表格 end -->

                <!-- 分页 start -->
                <div class="searchGroupBox well marginTop flex_center">
                    <div>
                        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                        <el-button @click="goBack">返回试卷列表</el-button>
                    </div>
                </div>
                <!-- 分页 end -->
            </div>
            <div style="height: 20px;"></div>
        </div>
        <!-- /Main Content -->

    </div>
    <!-- /Page Content -->
</div>

<!-- Back to Top -->
<a id="back-to-top" href="#" class="back-to-top">
    <span class="ti-angle-up"></span>
</a>
<!-- /Back to Top -->
<%@ include file="../../static/foot.jsp" %>

<script>
    <%@ include file="../../utils/menu.jsp"%>
    <%@ include file="../../static/setMenu.js"%>
    <%@ include file="../../utils/baseUrl.jsp"%>
    <%@ include file="../../static/getRoleButtons.js"%>
    <%@ include file="../../static/crossBtnControl.js"%>

    // 用户登出
    <%@ include file="../../static/logout.jsp"%>

    $(document).ready(function () {
        //激活翻页按钮
        $('#tableId_previous').attr('class', 'paginate_button page-item previous')
        $('#tableId_next').attr('class', 'paginate_button page-item next')
        //隐藏原生搜索框
        $('#tableId_filter').hide()
        //设置右上角用户名
        $('.dropdown-menu h5').html(window.sessionStorage.getItem('username') + '(' + window.sessionStorage.getItem('role') + ')')
        //设置项目名
        $('.sidebar-header h3 a').html(projectName)
        setMenu();
        <%@ include file="../../static/myInfo.js"%>
    });
</script>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    const examinationPaperList = new Vue({
        el: "#examinationPaperList",
        data() {
            return {
                ruleForm: {
                    name: '',
                    examDuration: '',
                    status: 0,
                },
                rules: {
                    name: [
                        {required: true, message: '请输入试卷名称', trigger: 'blur'}
                    ],
                    examDuration: [
                        {required: true, message: '请输入考试时长', trigger: 'blur'}
                    ],
                },
                activeName: 'singleChoice',
                // 单选题 - 已选择
                singleChoiceSelected: [],
                // 单选题 - 题目列表
                singleChoiceData: [],
                // 多选题 - 已选择
                multipleChoiceSelected: [],
                // 多选题 - 题目列表
                multipleChoiceData: [],
                // 判断题 - 已选择
                trueOrFalseSelected: [],
                // 判断题 - 题目列表
                trueOrFalseData: [],
                // 填空题 - 已选择
                fillInTheBlankSelected: [],
                // 填空题 - 题目列表
                fillInTheBlankData: [],
                // 修改的试卷id
                examinationPaperId: 0,
            };
        },
        methods: {
            submitForm(formName) {
                const _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 组装请求参数
                        const requestData = {
                            id: _this.examinationPaperId,
                            name: _this.ruleForm.name,
                            examDuration: _this.ruleForm.examDuration,
                            status: _this.ruleForm.status,
                            singleChoice: _this.singleChoiceSelected,
                            multipleChoice: _this.multipleChoiceSelected,
                            trueOrFalse: _this.trueOrFalseSelected,
                            fillInTheBlank: _this.fillInTheBlankSelected,
                        };
                        console.debug(requestData);
                        axios({
                            url: '${pageContext.request.contextPath}/examination/update',
                            method: 'post',
                            data: requestData,
                            headers: {
                                'Content-Type': 'application/json;charset=UTF-8',
                                'token': window.sessionStorage.getItem('token')
                            }
                        }).then(function (response) {
                            console.debug(response);
                            const {code, msg} = response.data;
                            if (code === 200) {
                                _this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                // 延迟跳转
                                setTimeout(function () {
                                    _this.goBack()
                                }, 1000);
                            } else {
                                _this.$message({
                                    message: msg,
                                    type: 'error'
                                });
                            }
                        }).catch(function (error) {
                            console.debug(error);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handlerInputExamDuration(value) {
                console.debug("考试时长：" + value)
                this.ruleForm.examDuration = this.ruleForm.examDuration.replace(/[^\d]/g, '')
            },

            handleTabClick(tab, event) {
            },
            goBack: function () {
                window.location.href = 'list.jsp';
            },
        },
        mounted() {
            const _this = this;
            // 获取试卷id
            const editTestPaperId = window.sessionStorage.getItem('editTestPaperId')
            if (editTestPaperId) {
                this.examinationPaperId = parseInt(editTestPaperId)
            } else {
                // 未获取到试卷id，跳转到列表页
                this.$confirm('获取修改数据的id失败，将返回列表', '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    showClose: false,
                    closeOnPressEscape: false,
                    closeOnClickModal: false,
                    type: 'warning'
                }).then(() => {
                    window.location.href = "${pageContext.request.contextPath}/jsp/modules/exampaper/list.jsp";
                })
                return false;
            }
            // 获取所有的试题列表
            axios({
                url: '/jspmk28g8/question/getAll',
                method: 'get',
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                    'token': window.sessionStorage.getItem('token')
                }
            }).then(function (res) {
                const {code, data} = res.data;
                if (code === 200) {
                    // 填充单选数据
                    _this.singleChoiceData = []
                    data.singleChoiceList.forEach(function (item) {
                        _this.singleChoiceData.push({
                            key: item.id,
                            label: item.name
                        })
                    })
                    // 多选数据
                    _this.multipleChoiceData = []
                    data.multipleChoiceList.forEach(function (item) {
                        _this.multipleChoiceData.push({
                            key: item.id,
                            label: item.name
                        })
                    })
                    // 判断题数据
                    _this.trueOrFalseData = []
                    data.judgeList.forEach(function (item) {
                        _this.trueOrFalseData.push({
                            key: item.id,
                            label: item.name
                        })
                    })
                    // 填空题数据
                    _this.fillInTheBlankData = []
                    data.fillList.forEach(function (item) {
                        _this.fillInTheBlankData.push({
                            key: item.id,
                            label: item.name
                        })
                    })
                }
            }).catch(function (error) {
                console.error(error);
            });
            // 获取试卷信息
            axios({
                url: '${pageContext.request.contextPath}/examination/query',
                method: 'get',
                params: {
                    id: this.examinationPaperId
                },
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                    'token': window.sessionStorage.getItem('token')
                }
            }).then(function (res) {
                console.debug(res)
                const {code, data} = res.data;
                if (code === 200) {
                    _this.ruleForm.name = data.name;
                    _this.ruleForm.examDuration = data.examDuration;
                    _this.ruleForm.status = data.status + ""
                    // 单选题
                    _this.singleChoiceSelected = []
                    _this.singleChoiceSelected = data.singleChoice
                    // 多选题
                    _this.multipleChoiceSelected = []
                    _this.multipleChoiceSelected = data.multipleChoice
                    // 判断题
                    _this.trueOrFalseSelected = []
                    _this.trueOrFalseSelected = data.trueOrFalse
                    // 填空题
                    _this.fillInTheBlankSelected = []
                    _this.fillInTheBlankSelected = data.fillInTheBlank
                }

            }).catch(function (error) {
                console.error(error);
            });
        }
    });
</script>
</body>

</html>